<template>
  <a-modal
    title="朋友圈管理"
    :width="1600"
    :visible="visible"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-card :bordered="false" >
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :alert="false"
        :rowKey="(record) => record.id"
      >
        <template class="table-operator" slot="operator" >
          <a-button type="primary"  icon="plus" @click="$refs.addForm.add(userId)">发送朋友圈</a-button>
        </template>
         <span slot="status" slot-scope="text">
          {{ 'dynamic_status' | dictType(text) }}
        </span>
        <!--头像-->
        <span slot="headPicUrl" slot-scope="text">
          <img :src="text" style="width: 60px; height: 60px" @click="headImgSrc=text; headPreviewVisible=true">
        </span>
        <!--发送内容 当张-->
<!--        <span slot="fileUrl" slot-scope="text">-->
<!--          <div style="display: flex; flex-direction: row; flex-wrap: wrap; width: 160px">-->
<!--             <div v-for="(image,index) in text" :key="index">-->
<!--                <img :src="image" style="width: 50px;height: 50px; margin-right:2px" @click="getIndex(image,index)">-->
<!--             </div>-->
<!--           </div>-->
<!--         </span>-->
        <!--发送内容 多张-->
        <span slot="fileUrl" slot-scope="text">
          <div style="display: flex; flex-direction: row; flex-wrap: wrap; width: 160px">
            <div v-for="(image,index) in text" :key="index"  @click="getIndexMultiple(text,index)">
              <img :src="image" style="width: 50px;height: 50px; margin-right:2px" >
            </div>
          </div>
         </span>
        <span slot="action" slot-scope="text, record">
          <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </s-table>
      <add-form ref="addForm" @ok="handleOk"/>
    </a-card>
    <!--头像弹窗-->
    <a-modal :visible="headPreviewVisible" :footer="null" @cancel="handleCancelHeadPreview()">
      <img alt="example" style="width: 100%" :src="headImgSrc"/>
    </a-modal>
    <!--发送内容 当张-->
<!--    <a-modal :visible="mediaPreviewVisible" :footer="null" :width="1000" @cancel="handleCancelMediaPreview()">-->
<!--      <img alt="example" style="width: 100%" :src="mediaImgSrc"/>-->
<!--    </a-modal>-->
    <!--发送内容 多张-->
    <a-modal :visible="mediaPreviewVisible" :footer="null" @cancel="handleCancelMediaPreview" :width="800" >
      <div style="display: flex; flex-direction: row; justify-content: center; align-items: center">
        <a-button type="primary" style="height: 50px;width: 50px " @click="mediaButUp">上</a-button>
        <img alt="example" style="width: 600px" :src="mediaList[mediaIndexImg]"/>
        <a-button type="primary" style="height: 50px;width: 50px " @click="mediaButDown">下</a-button>
      </div>
    </a-modal>
  </a-modal>
</template>
<script>
  import { STable, XCard } from '@/components'
  import { appDynamicPage, appDynamicDelete } from '@/api/modular/app/dynamic/appDynamicManage'
  import addForm from './addForm.vue'
  export default {
    components: {
      XCard,
      STable,
      addForm
    },
    data () {
      return {
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '发布人名称',
            dataIndex: 'nick'
          },
          {
            title: '发布人头像',
            dataIndex: 'headPicUrl',
            scopedSlots: { customRender: 'headPicUrl' }
          },
          {
            title: '发布内容',
            dataIndex: 'content'
          },
          {
            title: '发布图片',
            dataIndex: 'fileUrl',
            scopedSlots: { customRender: 'fileUrl' }
          },
          // {
          //   title: '状态',
          //   dataIndex: 'status',
          //   scopedSlots: { customRender: 'status' }
          // },
          {
            title: '发布时间',
            dataIndex: 'createTime'
          }
        ],
        visible: false,
        userId: '',
        dynamicStatusDict: [],
        // 预览 默认关闭
        headPreviewVisible: false,
        mediaPreviewVisible: false,
        // 头像地址赋值
        headImgSrc: '', // 头像图片地址
        mediaImgSrc: '', // 内容图片地址
        // 内容地址赋值
        mediaIndexImg: 0, // 默认从0开始
        mediaList: [], // 内容图片数组
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          this.queryParam.userId = this.userId
          return appDynamicPage(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        }
      }
    },
    created () {
      this.columns.push({
        title: '操作',
        width: '150px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      })
      this.sysDictTypeDropDown()
    },
    methods: {
      // 打开此页面首先加载此方法
      index (record) {
        this.visible = true
        this.userId = record.id
        try {
          this.$refs.table.refresh()
        } catch (e) {
          // 首次进入界面，因表格加载顺序，会抛异常，我们不予理会
        }
      },
      /**
       * 获取字典数据
       */
      sysDictTypeDropDown () {
        this.dynamicStatusDict = this.$options.filters['dictData']('dynamic_status')
      },
      /**
       * 单个删除
       */
      singleDelete (record) {
        const param = [{ 'id': record.id }]
        this.appDynamicDelete(param)
      },
      /**
       * 删除的方法
       * @param record
       */
      appDynamicDelete(record) {
        appDynamicDelete(record).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        }).catch((err) => {
          this.$message.error('删除错误：' + err.message)
        })
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      handleCancel () {
        this.visible = false
      },
      // 头像预览
      handleCancelHeadPreview () {
        this.imgSrc = ''
        this.headPreviewVisible = false
      },
      // 媒体预览
      handleCancelMediaPreview () {
        this.mediaPreviewVisible = false
      },
      // 单张
      // getIndex(image, index) {
      //   console.log(image, index)
      //   // 这里的item是点击获取当前值的每一项内容
      //   // 这里的index是点击获取当前值的下标
      //   this.mediaImgSrc = image
      //   this.mediaPreviewVisible = true
      // },
      // 多张
      getIndexMultiple(list, index) {
        console.log(list, index)
        // 这里的item是点击获取当前值的每一项内容
        // 这里的index是点击获取当前值的下标
        this.mediaList = list
        this.mediaIndexImg = index
        this.mediaPreviewVisible = true
      },
      // 上一页
      mediaButUp() {
        if (this.mediaIndexImg > 0) {
          this.mediaIndexImg--
        }
      },
      // 下一页
      mediaButDown() {
        if (this.mediaIndexImg < this.mediaList.length - 1) {
          this.mediaIndexImg++
        }
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
</style>
